<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="userCommon::common-header"></head>
<body class="sb-nav-fixed">
<nav th:replace="userCommon::common-navbar"></nav>
<div id="layoutSidenav">
    <div th:replace="userCommon::common-sidenav"></div>

    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid px-4">
                <h1 class="mt-4">我的课程</h1>

                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item"><a th:href="@{/toUserMain}">主页</a></li>
                    <li class="breadcrumb-item active">我的课程</li>
                </ol>

                <!-- 剩余课时显示组件 -->
                <div class="position-absolute top-0 end-0 mt-5 me-3" style="width: 15%; min-width: 120px; z-index: 1000;">
                    <div class="bg-light rounded p-2 shadow-sm custom-hour-component">
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-clock mr-2"></i>
                                <span>剩余课时：</span>
                            </div>
                            <div>
                                <span class="font-weight-bold"
                                      th:text="${session.user?.cardNextClass ?: '未登录'}">0</span>
                                <span class="ms-1">小时</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 错误信息显示 - 使用SweetAlert2 -->
                <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
                <div th:if="${errorMessage != null}">
                    <script th:inline="javascript">
                        Swal.fire({
                            icon: 'warning',
                            title: '操作提示',
                            text: /*[[${errorMessage}]]*/ '',
                            confirmButtonColor: '#3085d6'
                        });
                    </script>
                </div>

                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-table me-1"></i>
                        已选课程
                    </div>
                    <div class="card-body">
                        <table id="datatablesSimple">
                            <thead>
                            <tr>
                                <th>编号</th>
                                <th>名称</th>
                                <th>时间</th>
                                <th>教练</th>
                                <th>操作</th>
                            </tr>
                            </thead>

                            <tbody>
                            <!--
                            <tr th:if="${classOrderList == null || classOrderList.isEmpty()}">
                                <td>暂无已选课程</td>
                            </tr>-->

                            <!-- 课程数据行 -->
                            <tr th:each="class:${classOrderList}" th:unless="${classOrderList == null || classOrderList.isEmpty()}">
                                <td th:text="${class.classId}">编号</td>
                                <td th:text="${class.className}">名称</td>
                                <td th:text="${class.classBegin}">时间</td>
                                <td th:text="${class.coach}">教练</td>
                                <td>
                                    <input type="button" class="btn btn-sm btn-outline-danger"
                                           onclick="confirmDrop(this)"
                                           th:attr="data-class-order-id=${class.classOrderId}"
                                           value="退课">
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
        <footer th:replace="userCommon::common-footer"></footer>
    </div>
</div>

<div th:include="userCommon::common-scripts"></div>

<script>
    // 初始化DataTables
    document.addEventListener('DOMContentLoaded', function() {
        const table = document.getElementById('datatablesSimple');
        if (table) {
            // 检查是否有数据行（排除空状态行）
            const hasDataRows = table.querySelectorAll('tbody tr').length > 1 ||
                (table.querySelectorAll('tbody tr').length === 1 &&
                    !table.querySelector('tbody tr').textContent.includes('暂无已选课程'));

            if (hasDataRows) {
                new simpleDatatables.DataTable(table);
            } else {
                // 当没有数据时，保留表格结构但添加空状态类
                table.classList.add('empty-datatable');
            }
        }
    });

    function confirmDrop(button) {
        const classOrderId = button.getAttribute('data-class-order-id');
        console.log('退课ID:', classOrderId);

        // 添加调试信息，确认 classOrderId 是否为 null 或 NaN
        if (classOrderId === null) {
            console.error('data-class-order-id 属性值为 null');
        } else if (isNaN(parseInt(classOrderId))) {
            console.error('data-class-order-id 属性值不是有效的数字:', classOrderId);
        }

        if (!classOrderId || isNaN(parseInt(classOrderId))) {
            Swal.fire({
                icon: 'error',
                title: '操作失败',
                text: '无效的课程ID，请刷新页面后重试',
                confirmButtonColor: '#3085d6'
            });
            return;
        }

        Swal.fire({
            title: '确定要退选该课程吗？',
            text: "退课后将失去该课程的学习资格",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: '确认',
            cancelButtonText: '取消'
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = `/user/delUserClass?classOrderId=${classOrderId}`;
            }
        });
    }
</script>

</body>
</html>